<template>
  <!--      下部内容-->
  <!--        左边具体帖子-->
  <div class="row bottom_main">
    <div class="left_main col-md-9" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">

      <el-menu router
               :default-active="$route.path"
               class="el-menu-demo" mode="horizontal" @select="handleSelect">

        <el-menu-item index="/Discussion_Frame/Discussion_Main/All_Discussion">
          <span class="fontClass">全部帖子</span>
        </el-menu-item>


        <el-menu-item index="/Discussion_Frame/Discussion_Main/Question_Discussion">
          <span class="fontClass">求助问答</span>
        </el-menu-item>

        <el-menu-item index="/Discussion_Frame/Discussion_Main/Experience_Discussion">
          <span class="fontClass">学长学姐经验贴</span>
        </el-menu-item>

        <el-menu-item index="/Discussion_Frame/Discussion_Main/Life_Discussion">
          <span class="fontClass">日常生活</span>
        </el-menu-item>

        <el-menu-item index="/Discussion_Frame/Discussion_Main/Other_Discussion">
          <span class="fontClass">其他</span>
        </el-menu-item>

      </el-menu>

      <!--          具体帖子内容-->
      <div class="post_main">
        <router-view></router-view>
      </div>

    </div>

    <!--        右边最新帖子-->
    <div class="right_main col-md-3">
      <el-card class="box-card" >
        <div slot="header" class="clearfix mt-2">
          <span class="fontClass" style="font-weight: bold">最新帖子</span>
        </div>
        <div v-for="(post) in post_info" :key=post.post_id class="text item border-bottom pb-3">
          <div class="row">
            <div class="pl-3">
              <router-link :to="{path:'/Discussion_Frame/One_Post_Main/One_Post',query:{post_id:post.post_id}}">
                <a class="mb-1" href="javascript:void(0);" style="font-size: 17px;font-weight: bold">
                  · {{post.post_title}}</a>
              </router-link>
            </div>
          </div>
        </div>
      </el-card>

      <!--    最热帖子-->
      <el-card class="box-card mt-3" >
        <div slot="header" class="clearfix mt-2">
          <span class="fontClass" style="font-weight: bold">最热帖子</span>
        </div>
        <div v-for="(post) in high_post_info" :key=post.post_id class="text item border-bottom pb-3">
          <div class="row">
            <div class="pl-3">
              <router-link :to="{path:'/Discussion_Frame/One_Post_Main/One_Post',query:{post_id:post.post_id}}">
                <a class="mb-1" href="javascript:void(0);" style="font-size: 17px;font-weight: bold">
                  · {{post.post_title}}</a>
              </router-link>
            </div>
          </div>
        </div>
      </el-card>

    </div>



  </div>

</template>

<script>
import {getNewPostInfo} from '@/api/Discussion'

export default {
  name: "discussion_main",
  components:{

  },
  data() {
    return {
      param: {
        key: '',
        page: 1,
        limit: 10,
      },
      post_info:[],
      high_post_info:[],

    }
  },
  methods:{
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    //获取最新五条帖子
    init() {
      getNewPostInfo({
        page: this.param.page,
        limit: this.param.limit
      }).then(res => {
        this.post_info = res.data.data;
        this.high_post_info=res.data.high_post_info;
      });
    },


  },
  created() {

    // if(this.$router.history.current.path !='/Discussion_Frame/Discussion_Main/All_Discussion'){
    //   this.$router.push({path:'/Discussion_Frame/Discussion_Main/All_Discussion'});
    // }
    let _this=this;
    _this.init();

  }
}
</script>

<style scoped>
/*下面部分总体盒子*/
.bottom_main{

}
/*下面左边部分盒子*/
.left_main {
  /*margin-left: 110px;*/
  border-radius: 10px;
  background-color: white;
  padding: 20px;
  /*margin-top: -40px;*/
}
/*选项卡的字体*/
.fontClass{
  font-size:20px;
  font-family: Microsoft Yahei;
}
/*去路由横线*/
a:hover
{
  text-decoration: none;
}
/*右边最新帖子卡片样式*/
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}
/*下部盒子样式*/
.bottom_main{
  margin-left: 110px;
  margin-right: 320px;
  /*width:1350px;*/
  /*margin:0 auto;*/
}
</style>
